<template>
	<view v-if="logfals">
		<view>
			<view class="top" :style="{ paddingTop: safeAreaInsets?.top + 'px' }">
				<h3 class="h1">我的</h3>
				<view class="bot"></view>
				<view></view>
			</view>
			<view class="my_heades">
				<view class="my_top">
					<view class="my_img"> 
						<image  :src="data.avatar" mode="scaleToFill" />

					</view>
					<view class="con">
						<text class="name">{{ data.nickname }}</text>
						<text>{{ data.mobile }}</text>
					</view>
					<view><uni-icons type="email-filled" color="#007BFF" size="30" @click="gotoinxi()"></uni-icons></view>
				</view>
				<view class="bom">
					<view>
						<uni-icons type="shop-filled" color="#DA83FF" size="30"></uni-icons>
						<text>我的发布</text>
					</view>
					<view>
						<uni-icons type="star-filled" color="#FFEA00" size="30"></uni-icons>
						<text>收藏</text>
					</view>
					<view>
						<uni-icons type="person-filled" color="#FF3F3F" size="30"></uni-icons>
						<text>浏览历史</text>
					</view>
				</view>
			</view>
			<view>
			</view>
			<view class="box"></view>
			<view class="my_list">
				<text>支付明细</text>
				<uni-icons type="forward" color="rgb(69, 69, 69)" size="20"></uni-icons>
			</view>
			<view class="my_list" @click="gotuFeedb()">
				<text>问题反馈</text>
				<uni-icons type="forward" color="rgb(69, 69, 69)" size="20"></uni-icons>
			</view>
			<view class="my_list" @click=" gotuHpone()">
				<text>联系客服</text>
				<uni-icons type="forward" color="rgb(69, 69, 69)" size="20"></uni-icons>
			</view>
			<button class="logon" @click="onaoto()">退出登录</button>
		</view>

	</view>
	<view v-else>

		<view class="top">
			<h3 class="h1">我的</h3>
			<view class="bot"></view>
			<view class="head_portrait">
				<uni-icons type="contact" size="100" color="#ccc"></uni-icons>
			</view>
		</view>
		<button class="login" @click="onlogin()">点击登录</button>
	</view>
</template>

<script setup>
// import {onCreated } from 'vue'
const { safeAreaInsets } = uni.getSystemInfoSync()

import { onShow } from '@dcloudio/uni-app'
import { ref , } from 'vue'
const onlogin = () => {
	uni.navigateTo({
		url: '/subpkg/login/login',
	});
}
let data = ref('')
let logfals = ref(null)
function render() {

}
onShow(async () => {
	data.value = JSON.parse(uni.getStorageSync('user') || '{}')
	logfals.value = uni.getStorageSync('token') || ''
})

function onaoto() {
	// wx.$refs.citySelect.open();
	setTimeout(() => {
		uni.removeStorageSync('user')
		uni.removeStorageSync('token')
		data.value = null
		logfals.value = ''
		console.log(data);
		uni.$showMeg('退出成功')
	}, 500)
}
// 
const gotuHpone = ()=>{
	uni.makePhoneCall({
  phoneNumber: '10086' //仅为示例，并非真实的电话号码
})
}
const gotuFeedb = ()=>{
	uni.navigateTo({
		url: '../../subpkg/feedback/feedback',
		
	});
}
// 跳转信息列表页面
const gotoinxi = ()=>{
	uni.navigateTo({ url: '../../subpkg/submessage/submessage' })
}

</script>

<style lang="scss" scoped>
.top {
	width: 100vw;
	height: 30vh;
	background: #208CFF;
	position: relative;

	.h1 {
		color: white;
		position: absolute;
		left: 50%;
		top: 28%;
		transform: translate(-50%, -50%);
		font-size: 18px;
	}
	.bot {
		// position: absolute;
		width: 110vw;
		height: 10vh;
		background-color: #f5f5f5;
		position: absolute;
		left: 50%;
		transform: translatex(-50%);

		bottom: -4vh;
		border-radius: 50%;
	}

	.head_portrait {
		position: absolute;
		left: 50%;
		transform: translatex(-50%);
		top: 15vh;
		background: rgb(239, 239, 239);
		border-radius: 50%;
		border: white 3px solid;
	}

}

.login {
	width: 80vw;
	background: #208CFF;
	color: white;
	border-radius: 25px;
	margin-top: 50px;
}

.logon {
	background: #FF656Fed;
	color: white;
	border-radius: 25px;
	position: fixed;
	bottom: 5vh;
	left: 50%;
	transform: translate(-50%);
	width: 80vw;
}

.my_heades {
	width: 90vw;
	height: 20vh;
	border-radius: 12px;
	box-shadow: 0 0 10px #ccc;
	position: fixed;
	z-index: 999;
	left: 50%;
	transform: translate(-50%);
	top: 14vh;
	background: white;
	padding: 10px;

	.my_top {
		border-bottom: 1px solid rgb(196, 196, 196);
		height: 50%;
	}
}

.my_img {
	width: 120rpx;
	height: 120rpx;
	padding: 0 40rpx;
	overflow:hidden;
	image{
		width: 100%;
		height: 100%;
	border-radius: 120rpx;

	}
}

.my_top {
	display: flex;

	.con {
		display: flex;
		flex-direction: column;
		width: 50vw;

		text {
			line-height: 60rpx;
		}

		.name {
			font-weight: 900;
		}

	}
}

.bom {
	display: flex;
	justify-content: space-between;

	view {
		display: flex;
		flex-direction: column;
		align-content: center;
		text-align: center;
		line-height: 50rpx;
		margin-top: 20rpx;
	}
}
.box{
	height: 10vh;
}
.my_list{
	padding: 0 5vw;
	display: flex;
	justify-content: space-between;
	align-items: center;
	line-height: 50px;
	color: rgb(69, 69, 69);
	border-bottom: 8px rgb(227, 227, 227) solid;
}
</style>